import React, {Component} from 'react';
import {require} from "../../netWork";
import './SildeShow.scss'
import SearchBar from "../SearchBar/SearchBar";
import {baseUrl} from "../../utiles/baseUrl";

class SlideShow extends Component {
    state = {
        img: [], /*图片*/
        time: 0,
        iner: null  /*消除计时变量*/
    };

    componentDidMount() {  //获取轮播的图片
        return require({
            url: '/home/swiper'
        }).then(res => {
            res.body.map(res => {
                // console.log(res);
                // console.log(res);
                res.imgSrc = baseUrl + res.imgSrc ;
                // `http://localhost:8009${res.imgSrc}`;
                return 0
            });
            this.setState({img: res.body});
        });
        // this.renderSwiper()
    }

    renderSwiper = () => {
        let iner = setInterval(() => {
            let {time} = this.state;
            if (time >= this.state.img.length - 1) {
                this.setState({time: 0})
            } else {
                time = time + 1
                this.setState({time: time})
            }
        }, 2000)
        this.setState({iner: iner})
    };

    MouseOn = () => {
        const {iner} = this.state;
        clearInterval(iner)
    };
    MouseLeave = () =>{
       this.renderSwiper()
    } ;
    componentWillUnmount() {
        clearInterval(this.state.iner)
    }


    render() {
        const {img} = this.state;
        return (
            <div className='bar'>
                    <SearchBar className='ff'/>
                <ul>
                    {img.map((item, index) => {
                        return <li key={item.id}>
                            <img
                             src={item.imgSrc} alt={item.id} className={index === this.state.time ? 'display' : 'none' }
                                 onMouseEnter={this.MouseOn} onMouseLeave={this.MouseLeave}/>
                        </li>
                    })}

                </ul>
            </div>
        );
    }
}

export default SlideShow;
